<template>
	<div class="carinfo">
		<div class="carinfo-box" @click="hide"></div>
		<section>
			<div class="carinfo-list">
				<div class="carinfo-item">
					<router-link :to="{path:'/customer_edit',query:{params:params,key:true}}">
						<div class="carinfo-icon">
							<i class="iconfont"><img src="static/images/bjkh.svg"  width="45" height="45"  /></i>
						</div>
						<div class="carinfo-txt">编辑客户</div>
					</router-link>
				</div>
				<div class="carinfo-item">
					<router-link :to="{path:'/addIntentions',query:{params:params,key:true}}">
						<div class="carinfo-icon">
							<i class="iconfont"><img src="static/images/tjyx.svg" width="45" height="45" /></i>
						</div>
						<div class="carinfo-txt">添加意向</div>
					</router-link>
				</div>
				<div class="carinfo-item" v-if="followState!=30&&followState!=40&&followState!=50&&followState!=0">
					<router-link :to="{path:'/follow_all',query:{params:params,key:true}}">
						<div class="carinfo-icon">
							<i class="iconfont"><img src="static/images/gj.svg" width="45" height="45" /></i>
						</div>
						<div class="carinfo-txt">跟进</div>
					</router-link>
				</div>
				<div class="carinfo-item" v-if="followState!=0">
					<router-link :to="{path:'/follow_history',query:{params:params,key:true}}">
						<div class="carinfo-icon">
							<i class="iconfont"><img src="static/images/gjls.svg" width="45" height="45" /></i>
						</div>
						<div class="carinfo-txt">跟进历史</div>
					</router-link>
				</div>
				<!-- <div class="carinfo-item" @click="deleteCustomer"> 
					
						<div class="carinfo-icon">
							<i class="iconfont"><img src="static/images/sc.svg" width="45" height="45" /></i>
						</div>
						<div class="carinfo-txt">删除客户</div>
					
				</div> -->
			</div>
			<div class="carinfo-cancel" @click="hide">取消</div>
		</section>
	</div>
</template>

<script>

	export default {
		data() {
			return {
				orderId: '',
				carId: '',
				paramsData:{},
				followState:'',
			}
		},
		methods: {
			hide() {
				this.$emit('cancel')
			},
			testingsTwo() {
				
			},
			deleteCustomer(){
				$dialog.confirm({
					// 标题					
					title: '提示',
					content: '是否删除客户',
					// 取消按钮文本
					cancelText: '取消',
					// 确定按钮文本
					okText: '删除'
				}).then((res) => {
					if(res) {
						
					}
				})
			}
		},
		props: [
			'params'
		],
		computed: {
			// 获取缓存数据
			userSession() {
				return sess.get('userSession')
			},

		},
		mounted() {
			this.followState = this.$store.state.screenToInfo.customerInfo.followState
		}
	}
</script>

<style>
	.carinfo {
		position: fixed;
		z-index: 999;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	
	.loading-container.visible.active {
		z-index: 999999999;
	}
	
	.carinfo-box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
	}
	
	.carinfo section {
		position: absolute;
		z-index: 2;
		bottom: 0;
		width: 100%;
		height: auto;
		background: #fff;
		animation: carinfo 1s ease-in-out forwards;
		-webkit-animation: carinfo 1s ease-in-out forwards;
	}
	
	@keyframes carinfo {
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
	
	@-webkit-keyframes carinfo {
		to {
			-webkit-transform: translateY(0);
			-webkit-opacity: 1;
		}
	}
	
	.carinfo-list {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		padding: 15px 0;
	}
	
	.carinfo-list:after {
		content: "";
		display: block;
		clear: both;
	}
	
	.carinfo-item {
		width: 33.33%;
		float: left;
		padding: 8px 0;
		transform: translateY(100%);
		-webkit-transform: translateY(100%);
		opacity: 0;
	}
	
	.carinfo-item:nth-child(1) {
		animation: carinfo .4s ease-in-out forwards .1s;
		-webkit-animation: carinfo .4s ease-in-out forwards .1s;
	}
	
	.carinfo-item:nth-child(2) {
		animation: carinfo .4s ease-in-out forwards .15s;
		-webkit-animation: carinfo .4s ease-in-out forwards .15s;
	}
	
	.carinfo-item:nth-child(3) {
		animation: carinfo .4s ease-in-out forwards .2s;
		-webkit-animation: carinfo .4s ease-in-out forwards .2s;
	}
	
	.carinfo-item:nth-child(4) {
		animation: carinfo .4s ease-in-out forwards .25s;
		-webkit-animation: carinfo .4s ease-in-out forwards .25s;
	}
	
	.carinfo-item:nth-child(5) {
		animation: carinfo .4s ease-in-out forwards .3s;
		-webkit-animation: carinfo .4s ease-in-out forwards .3s;
	}
	
	.carinfo-item:nth-child(6) {
		animation: carinfo .4s ease-in-out forwards .35s;
		-webkit-animation: carinfo .4s ease-in-out forwards .35s;
	}
	
	.carinfo-item:nth-child(7) {
		animation: carinfo .4s ease-in-out forwards .4s;
		-webkit-animation: carinfo .4s ease-in-out forwards .4s;
	}
	
	.carinfo-item:nth-child(8) {
		animation: carinfo .4s ease-in-out forwards .45s;
		-webkit-animation: carinfo .4s ease-in-out forwards .45s;
	}
	
	.carinfo-item:nth-child(9) {
		animation: carinfo .4s ease-in-out forwards .5s;
		-webkit-animation: carinfo .4s ease-in-out forwards .5s;
	}
	
	.carinfo-item:nth-child(10) {
		animation: carinfo .4s ease-in-out forwards .55s;
		-webkit-animation: carinfo .4s ease-in-out forwards .55s;
	}
	
	.carinfo-icon {
		color: #FF6816; height: 56px; line-height: 56px;
	}
	
	.carinfo-icon i {
		padding: 8px 0;
		display: inline-block;
		font-size: 36px;
	}
	
	.carinfo-txt {
		font-size: 13px;
	}
	
	.carinfo-cancel {
		width: 90%;
		text-align: center;
		height: 40px;
		line-height: 40px;
		color: #fff;
		background: #FF6816;
		border-radius: 3px;
		margin: 15px auto;
		font-size: 13px;
		transform: scale(.5);
		-webkit-transform: scale(.5);
		opacity: 0;
		animation: cancel .4s ease-in-out forwards .4s;
		-webkit-animation: cancel .4s ease-in-out forwards .4s;
	}
	
	@keyframes cancel {
		to {
			transform: scale(1);
			opacity: 1;
		}
	}
	
	@-webkit-keyframes cancel {
		to {
			-webkit-transform: scale(1);
			-webkit-opacity: 1;
		}
	}
	
	.popup-container.popup-showing {
		z-index: 99999999;
		background: rgba(0, 0, 0, .3);
	}
</style>